<template>
    <div class="Help body">
        <div class="hp_box">
            <div class="lef">
                <ul>
                    <li
                        :class="icur == item.path ? 'h_active' : ''"
                        v-for="(item, index) in title"
                        :key="index"
                        @click="
                            icur = item.path;
                            $router.push(item.path);
                        "
                    >
                        <span></span>
                        <i>{{ item.text }}</i>
                    </li>
                </ul>
            </div>
            <router-view class="rig" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'HeLp',
    props: {
        msg: String,
    },
    data() {
        return {
            icur: '/Help/About',
            title: [
                {
                    text: '关于我们',
                    path: '/Help/About',
                },
                {
                    text: '联系我们',
                    path: '/Help/contact',
                },
                {
                    text: '企业合作',
                    path: '/Help/Company',
                },
                {
                    text: '友情链接',
                    path: '/Help/Links',
                },
                {
                    text: '用户协议',
                    path: '/Help/Xieyi',
                },
                {
                    text: '隐私协议',
                    path: '/Help/Version',
                },
                {
                    text: '意见反馈',
                    path: '/Help/Feedback',
                },
                {
                    text: '加入我们',
                    path: '/Help/Joinus',
                },
            ],
        };
    },
    mounted() {
        this.icur = this.$router.history.current.path;
    },
    watch: {
        $route: 'getPath',
    },
    methods: {
        getPath() {
            this.icur = this.$router.history.current.path;
        },
    },
};
</script>

<style scoped lang="scss">
.hp_box {
    margin: 20px auto 50px;
    width: 1200px;
    overflow: hidden;
}

.lef {
    height: 616px;
    float: left;
    width: 270px;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;

    ul {
        li {
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            span {
                width: 5px;
                height: 70px;
                background: #fff;
            }

            i {
                font-size: 18px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                color: #312d24;
                text-align: center;
                width: 265px;
            }
        }

        .h_active {
            background: #f6f6f6;

            span {
                background: #262626;
            }
        }
    }
}
.rig {
    width: 910px;
    float: right;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;
}
</style>
